import { FieldItem, useFormField, widgets } from './useForm';

type Props = {
  id: string;
  path: string[];
  field: FieldItem;
};

const DxFormItem: React.FC<Props> = ({ id, path, field }) => {
  const [value, setValue] = useFormField(id, path);
  const w = field.widget || 'input';
  const Widget = widgets[w] as any;
  const props = field.props || {};

  return (
    <div>
      <div>{field.label}</div>
      <div>
        <Widget {...props} value={value} onChange={setValue} />
      </div>
    </div>
  );
};

export default DxFormItem;
